<template>
  <div class="index">
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search" @click="$router.push({ name: 'search' })">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div class="user">
        <van-icon name="manager-o" />
      </div>
    </div>
    <!-- 1.通过 sticky 属性可以开启粘性布局，粘性布局下，标签页滚动到顶部时会自动吸顶 -->
    <!-- 2 通过 animated 属性可以开启切换标签内容时的转场动画。 -->
    <!-- 3通过 swipeable 属性可以开启滑动切换标签页 -->
    <van-tabs v-model="active" sticky animated swipeable>
      <van-tab :title="value.name" v-for="value in cateList" :key="value.id">
        <van-list
          v-model="value.loading"
          :finished="value.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          :offset="5"
        >
          <!--immediate-check 是否在初始化时立即执行滚动位置检查 -->
          <mypostBlock
            v-for="item in value.postList"
            :key="item.id"
            :post="item"
            @click.native="$router.push({ path: `/postDetail/${item.id}` })"
          >
          </mypostBlock>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCateList } from "@/apis/category";
import { getPostByCateId } from "@/apis/post";
import mypostBlock from "@/components/mypostBlock";
export default {
  data() {
    return {
      // 当前被选中标签的索引值
      // 我们要求默认让头条被激活，所以要根据当前用户的登陆状态设置索引值
      // 如果登陆了，第一项是关注，所以索引为1
      // 如果没有登陆,第一项是头条,索引为0
      active: localStorage.getItem("toutiaoToken") ? 1 : 0,
      cateList: [],
      // postList:[]
    };
  },
  components: {
    mypostBlock,
  },
  // mounted() {
  //   //// 1.组件一加载完毕就获取数据，实现动态渲染--动态渲染栏目数据
  //   getCateList()
  //   .then((res) => {
  //     console.log(res);
  //     // this.cateList = res.data.data;
  //     //之前的栏目数据只有 id,name,is_top v是 一个对象包括id,name,is_top
  //     this.cateList = res.data.data.map((v) => {
  //       return {
  //         ...v,
  //         postList: [],// 当前栏目的用于存储栏目新闻数据的数组
  //         pageSize:6, //当前栏目的每页显示的数量
  //         pageIndex:1,
  //         loading:false, // 当前栏目是否正在加载数据
  //         finished:false,// 当前栏目数据是否已经全部加载完毕了
  //       };
  //     });
  //     // 2获取默认栏目的新闻数据:关键在于获取当前栏目(头条)的栏目id
  //     this.init()
  //   });

  // await必须在async函数中才能使用
  async mounted() {
    // 当打开首页之后，应该先读取本地存储的数据，如果有数据，就根据本地存储数据渲染栏目列表，如果没有数据，则发起后台请求
    this.cateList = JSON.parse(localStorage.getItem("cateList")) || [];
    if (this.cateList.length == 0) {
      // await的特点：等待后面的异步操作执行完毕之后，才继续后面的代码，相当于将异步操作当成同步执行
      // await的作用：等待执行，它可以获取后面的异步操作的.then的回调方法的返回参数，相当于下面的代码中的res
      let res = await getCateList(); 
      this.cateList = res.data.data;
    } else {
      // 根据用户登陆状态，手动添加关注和头条
      if (localStorage.getItem("toutiaoToken")) {
        // 说明登陆了，应该添加关注和头条
        this.cateList.unshift(
          { id: 0, name: "关注", is_top: 1 },
          { id: 999, name: "头条", is_top: 1 }
        );
      } else {
        // 没有登陆，就只需要添加头条
        this.cateList.unshift({ id: 999, name: "头条", is_top: 1 });
      }
    }
    // 之前的栏目数据只有 id  name  is_top,不符合我们的业务需求，我们需要为每个栏目添加一个属于这个栏目自己的用于存储栏目新闻数据的数组
    this.cateList = this.cateList.map((v) => {
      return {
        ...v, // id  name is_top
        postList: [], // 当前栏目的用于存储栏目新闻数据的数组
        pageSize: 6, // 当前栏目的每页显示的数量
        pageIndex: 1, // 当前栏目的页码
        loading: false, // 当前栏目是否正在加载数据
        finished: false, // 当前栏目数据是否已经全部加载完毕了
        isLoading: false, // 当前栏目是否正在下拉刷新
      };
    });
    // console.log(this.cateList);
    // 2.获取默认栏目的新闻数据:关键在于获取当前栏目(头条)的栏目id
    this.init();

    // 栏目管理跳转页面
    //为标签页添加事件，如果在事件处理函数中获取的样式为van-sticky，说明用户单击的位置就是伪元素的位置
    document.querySelector(".van-sticky").onclick = (e) => {
      console.log(e.target.className);
      if (e.target.className.indexOf("van-sticky") !== -1) {
        this.$router.push({ name: "cateManager" });
      }
    };
  },

  methods: {
    onLoad() {
      this.cateList[this.active].pageIndex++;
      // setTimeout(() => {
      this.init();
      //}, 1500);
    },
    init() {
      // this.cateList:当前栏目数组
      // this.cateList[this.active]：通过索引获取当前栏目对象
      // this.cateList[this.active].id：获取栏目对象的id
      getPostByCateId({
        category: this.cateList[this.active].id,
        pageSize: this.cateList[this.active].pageSize,
        pageIndex: this.cateList[this.active].pageIndex,
      }).then((res) => {
        console.log(res);
        // this.cateList[this.active].postList = res.data.data;
        this.cateList[this.active].postList.push(...res.data.data);
        // 数据加载完毕之后，将当前栏目的loading重置为False,以便下一次上拉
        this.cateList[this.active].loading = false;
        // 如果当前栏目的所有数据都加载完毕，则需要将当前栏目的finished重置为true,以使用onload不再触发
        // 如果我们需要pageSize条数据，但是服务器返回的数据的条数小于它，说明数据已经完全加载完毕了
        if (res.data.data.length < this.cateList[this.active].pageSize) {
          this.cateList[this.active].finished = true;
        }
      });
    },
  },
  watch: {
    active() {
      if (this.cateList[this.active].postList.length == 0) {
        this.init();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: #f00;
  .logo {
    color: #fff;
    .iconnew {
      font-size: 50px;
    }
  }
  .search {
    flex: 1;
    height: 40px;
    margin-top: 5px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 0 10px;
  }
  .user {
    color: #fff;
    font-size: 20px;
  }
}
/deep/ .van-sticky {
  padding-right: 44px;
  &::after {
    content: "+";
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
  }
}
</style>